<template>
    <div class="common-layout">
      <el-container class="w-1200px mx-auto">
        <el-aside class="bg-white rounded-8px w-200px py-34px">
            <div class="flex mb-10px">
              <div class="self-center flex ml-30px mr-15px"><el-icon class="" :size="20"><Notebook /></el-icon></div>
              <div class="self-center text-16px font-600">智能教材</div>
            </div>
            <block v-for="(item,index) in menuList" :key="index">
                <div class="text-14px my-8px font-600 sub-route">
                    <router-link :to="item.path" :class="{ 'router-link-active': activeTab === item.path }">{{ item.name }}</router-link>
                </div>
            </block>
        </el-aside>
        <el-main class="p-0 ml-20px w-980px">
          
            <router-view />
        </el-main>
        
      </el-container>
    </div>
    <el-dialog
      v-model="dialogVisible"
      title="完成天数"
      width="500"
      :before-close="handleClose"
    >
      <el-input v-model="planDays" :placeholder="placeholderPlandays" />
      
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="setPlan()">
            确定
          </el-button>
        </div>
      </template>
    </el-dialog>
  </template>
  
  <script setup>
    import { systemApi,userApi,httpApi } from '../api/api'
    import { useRoute } from 'vue-router'
    import { configStore } from '../stores/config'
    import { diffTwoDates,getToday } from '../utils/tool'
    import { ElMessage, ElMessageBox,ElLoading  } from 'element-plus'
    import { ref,onMounted,watch,computed } from "vue"
    const menuList = ref([
      {name:"考试大纲",identifier: 'outline',path:"/book/outline"},
      {name:"原版教材",identifier: 'book1',path:"/book/book/1"},
      {name:"精编教材",identifier: 'book2',path:"/book/book/2"},
      {name:"视频教材",identifier: 'video',path:"/book/video"},
      {name:"知识点",identifier: 'book3',path:"/book/book/3"},
    //   {name:"思维导图",path:"/book/mindmap"},
      {name:"标准法规库",identifier: 'law',path:"/book/law"},
    ])
    const dialogVisible = ref(false)
    const config = configStore()
    const lessonData = ref({})
    const route = useRoute()
    
    let diffDays = ref(0) 
    let placeholderPlandays = ref("请输入完成天数")
    let planDays = ref("")
    let distanceText = ref("")
    let distance = ref([])

    const init = async ()=>{
      lessonData.value = config.getBook()
      let today = getToday()
      let resLessonExamTime = await httpApi.getLessonExamtime()
      const configDate = config.getConfig()
      configDate.examTime = resLessonExamTime.data.exam_time

      let examDate = configDate.examTime
        //config.setConfig(configDate) ///设置缓存的考试时间
      diffDays.value = diffTwoDates(today,examDate)
        //console.log("相差几天",diffDays)
      if(diffDays.value >= 0){
        distance.value = diffDays.value.toString().split("")
        placeholderPlandays.value = `请输入完成天数(1-${diffDays.value}天)`
        distanceText.value = "距离考试还有："
      }else{
        distanceText.value = "考试已超期："
        distance.value = Math.abs(diffDays.value).toString().split("")
      }
      
      //console.log(distanceText.value)
    }

    const setPlan = async ()=>{
      if(planDays.value > diffDays.value){
        ElMessage.error('请设置合理的完成天数')
        return
      }
      let params = {
        planDays : planDays.value
      }
      const loading = ElLoading.service({
        lock: true,
        text: '计划制定中...',
        background: 'rgba(0, 0, 0, 0.7)',
      })
      let res = await httpApi.setPlan(params)
      loading.close()
      if(res.code){
        ElMessage.success(res.msg)
        dialogVisible.value = false
      }else{
        ElMessage.error(res.msg)
      }

    }
    const activeTab = computed(() => {
        console.log("测试：",menuList.value.find(tab => 
            tab.identifier === route.meta.tabIdentifier
        )?.path)
        return menuList.value.find(tab => 
            tab.identifier === route.meta.tabIdentifier
        )?.path
    })
    // 科目变化时加载
    watch(() => config.$state.currentBook.book_id, () => {
      init()
    })
    onMounted(()=>{
      init()
    })
  
  </script>
  <style scoped>
    .sub-route a:link{
      padding:12px 54px;
      
      display:block;
      text-align:center;
    }
    .sub-route a:hover,.sub-route .router-link-active{
      padding:12px 54px;
      border-left:4px solid #fc5751;
      background-color: rgba(254, 226, 226, 1);
      display:block;
      text-align:center;
    }
    .planHeader{
        padding:30px;
        background:#999;
        background: url(../../public/images/dayplan-bg.png) no-repeat;

    }
    .dayBg{
      background: url("../../public/images/day-bg2.png") 0 0 no-repeat;
      background-size: 100% 100%;
    }

  </style>